import React, { Component } from 'react';
import { Toast, Modal } from 'antd-mobile';
import '../css/skin.css';
import '../css/apply-detail.css';

let dics_arr = [];

// 支付操作
function pay(id, obj){
  let _url = 'http://58.220.10.23:8001/api/loanapply/union/pay?businessId='+id+'&payChannel=wxpay';
  console.log(id);
  fetch( _url, {
    method: 'POST',
    credentials: 'include',
   }).then(response => response.json())
   .then(data=>{
     if( data.status===500 ){
       Toast.fail(data.errorMsg, 2);
     }else if( data.result_code==='SUCCESS' ){
       obj.setState({
         modal1: true,
         codeUrl: 'http://qr.liantu.com/api.php?text='+data.code_url,
       });
       //console.log(data);
     }
   });
}

class App extends Component {
  constructor(props){
      super(props);
      this.state = {
        infos: {},
        btnText: '50元购买',
        modal1: false,
        codeUrl: '',
      };
  }


  componentDidMount() {
    try{
      if( this.props.location.query.id ){
        //console.log( this.props.location.query.id );
        // ajax get datas
        let _url = 'http://58.220.10.23:8001/api/loanapply/detail/'+this.props.location.query.id;
        fetch(_url, {
      	  method: 'POST',
          credentials: 'include',
    	   }).then(response => response.json())
    	   .then(data=>{
            console.log(data);
            if( data.status===0 ){
              // ajax get dics
              let _dickeys = 'SEX,BEAR_STATUS,MARRIAGE_STATUS';
              let _url = 'http://58.220.10.23:8001/api/dic/queryDicByIndexkeys?indexkeys[]='+_dickeys;
              fetch( _url, { method: 'GET', credentials: 'include',
          	   }).then(response => response.json())
          	   .then(dics=>{
                  dics_arr = dics;
                  //console.log(dics_arr);
                  // hide number
                  let phone = data.data.phone;
                  let identityCardNo = data.data.identityCardNo;
                  data.data.phone = phone.substr(0,3) + '****' + phone.substr(7);
                  data.data.identityCardNo = identityCardNo.substr(0,4) + '******' + identityCardNo.substr(10);
                  data.data['sexName'] = dics_arr.SEX[data.data.sex];
                  data.data['marriageStatusName'] = dics_arr.MARRIAGE_STATUS[data.data.marriageStatus];
                  data.data['bearStatusName'] = dics_arr.BEAR_STATUS[data.data.bearStatus];
                  this.setState({
                    infos : data.data
                  });

                  if( data.data['orderState']==='3' ){
                    this.setState({
                      btnText: '立即支付',
                    });
                  }
          	   })
            }
            console.log(this.state.infos);
    	   })
      }
    }catch(e){
      window.history.go(-1);
    }
  }

  // 购买
  buy=()=>{
    // 根据 orderState , 进行不同的操作， 2：需要先抢单，再支付，  3：直接支付。
    if( this.state.infos.orderState==='2' ){
      // 抢单
      //let formData = new FormData();
      //formData.append("id",this.props.location.query.id);
      let _url = 'http://58.220.10.23:8001/api/loanapply/take/'+this.props.location.query.id;
      fetch( _url, {
        method: 'POST',
        credentials: 'include',
       }).then(response => response.json())
       .then(data=>{
         if( data.status==0 ){
           pay(this.props.location.query.id,this);
         }else{
           Toast.fail(data.errorMsg, 2);
         }
       });

    }else if( this.state.infos.orderState==='3' ){
      pay(this.props.location.query.id,this);
    }
  }

  onClose = key => () => {
    this.setState({
      [key]: false,
    });
  }

  render() {
    return (
      <div className="skin-orange">
      	<p className="b-title bg-color">
          <span className="bg-color title-text white">抢单详情</span>
        </p>

	      <div className="container">
          <div className="form-type-wrap">
            <p className="border-color type-name">基本信息</p>
          </div>
          <ul id="basic">
    	 			<li>
    	 				<span className="info-label">姓名</span>
              <span className="info-data">{this.state.infos.identityName}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">性别</span>
              <span className="info-data">{this.state.infos.sexName}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">年龄</span>
            	<span className="info-data">{this.state.infos.age}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">身份证号</span>
              <span className="info-data">{this.state.infos.identityCardNo}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">手机</span>
            	<span className="info-data">{this.state.infos.phone}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">居住地</span>
              <span className="info-data">{this.state.infos.privinceName}-{this.state.infos.cityName}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">居住时长</span>
            	<span className="info-data">{this.state.infos.residenceTimeName}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">住房信息</span>
              <span className="info-data">{this.state.infos.residenceTypeName}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">学历</span>
              <span className="info-data">{this.state.infos.educationBgName}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">婚姻状况</span>
                <span className="info-data">{this.state.infos.marriageStatusName}</span>
        			</li>
    	 			<li>
    	 				<span className="info-label">生育状况</span>
              <span className="info-data">{this.state.infos.bearStatusName}</span>
        		</li>
          </ul>

          <div className="form-type-wrap">
            <p className="border-color type-name">公司信息</p>
          </div>
          <ul id="company">
    	 			<li>
    	 				<span className="info-label">职业</span>
              <span className="info-data">{this.state.infos.professionName}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">公司性质</span>
              <span className="info-data">{this.state.infos.companyTypeName}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">工作年限</span>
              <span className="info-data">{this.state.infos.worklifeName}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">收入流水</span>
              <span className="info-data">{this.state.infos.incomeModeName}</span>
        		</li>
          </ul>

          <div className="form-type-wrap">
            <p className="border-color type-name">借款信息</p>
          </div>
          <ul id="loan" style={{margin: '0 0 2.0rem 0'}}>
    	 			<li>
    	 				<span className="info-label">贷款金额</span>
              <span className="info-data">{this.state.infos.amount}</span>
        		</li>
    	 			<li>
    	 				<span className="info-label">贷款时间</span>
              <span className="info-data">{this.state.infos.loanPeriod}{this.state.infos.loanPeriodName}</span>
        		</li>
          </ul>

          <div className="line-wrap">
            <hr className="line"/>
            <span className="bg-color btn-buy" onClick={this.buy}>{this.state.btnText}</span>
          </div>
        </div>

        <Modal
          visible={this.state.modal1}
          transparent
          maskClosable={false}
          onClose={this.onClose('modal1')}
          title="支付二维码"
          footer={[{ text: '确定', onPress: () => { console.log('ok'); this.onClose('modal1')(); } }]}
          wrapProps={{ onTouchStart: this.onWrapTouchStart }}
        >
          <div style={{ width: '100%', height: 'auto', overflow: 'hidden'}}>
            <img src={this.state.codeUrl} style={{width: '100%',}} />
          </div>
        </Modal>

      </div>

    );
  }
}

export default App;
